
<style scoped>
</style>
<!-- tsx -->
<template>
  <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 每 日 收 支 (单位/元) </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="Date" label="日期" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageTotalAmount" label="礼包总收入" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageProvinceAmount" label="礼包省代分红" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageCityAmount" label="礼包市代分红" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageSalesAmount" label="礼包销售分红" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageWeightAmount" label="礼包加权分红" width="100" align="center"></el-table-column>
                <el-table-column prop="PackageCompanyAmount" label="礼包公司收益" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsTotalAmount" label="产品总收入" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsProvinceAmount" label="产品省代分红" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsCityAmount" label="产品市代分红" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsSalesAmount" label="产品销售分红" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsWeightAmount" label="产品加权分红" width="100" align="center"></el-table-column>
                <el-table-column prop="GoodsCompanyAmount" label="产品公司收益" width="100" align="center"></el-table-column>
                <el-table-column prop="ServiceTotalAmount" label="服务费总收入" width="100" align="center"></el-table-column>
                <el-table-column prop="ServiceProvinceAmount" label="服务费省代分红" width="150" align="center"></el-table-column>
                <el-table-column prop="ServiceCityAmount" label="服务费市代分红" width="150" align="center"></el-table-column>
                <el-table-column prop="ServiceSalesAmount" label="服务费销售分红" width="150" align="center"></el-table-column>
                <el-table-column prop="BonusCount" label="分红点发放数" width="100" align="center"></el-table-column>
                <!-- <el-table-column label="操作" width="100" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="searchDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { pagingStatistics } from '@/api/finance';
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
data() {
 // 这里存放数据
  return {
    query:{
      pageIndex:1,
      pageSize:20
    },
      tableData:[],
      pageTotal:0
  }
},
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
    pageChange(e){
        this.query.pageIndex = e
        this.getList()
    },
  getList() {
    pagingStatistics(this.query).then(res => {
      console.log(res)
      this.tableData = res.Data.list
                this.pageTotal = res.Data.paging.totalItemCount;
    })
  },
  sizeChange(e) {
    this.query.pageSize = e
    this.getList()
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  console.log(123)
  this.getList()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>